<template>
    <div class='contactus-bg'>
        <div class="contactus-inner w">
            <my-title :title="title" />
            <div class="contactus-describe">
                {{describe}}
            </div>
            <div class="contactus-contact">
                <form action="" method="" name="" class="contactus-from">
                    <input type="text" placeholder="请填写公司（个人）名称">
                    <input type="text" placeholder="请填写您资讯的业务">
                    <input type="text" placeholder="请填写您的手机号" v-model="num"> {{prompt}}
                </form>
            </div>
            <div class="contactus-more">查看更多&gt;</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: "",
            title: ["联系我们的专属团队", "CONTACT US"],
            describe:
                "我们提供专业的业务资讯，诚挚的态度，以及优质的服务，期待您的合作，共同打造互利，互惠，互助的双赢局面。"
        };
    },
    computed: {
        prompt: function() {
            if (!(this.num === "")) {
                if (!/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.num)) {
                    return "输入有误，请输入正确的11位手机号码";
                }
            }
        }
    }
};
</script>

<style lang='css' scoped>
.contactus-bg {
    background: url("../../assets/img/border02.png") repeat-x center top;
}
.contactus-bg .contactus-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top: 80px;
    padding-bottom: 100px;
    height: 100%;
}
.contactus-inner .contactus-describe {
    padding-bottom: 70px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 1.125rem;
    color: #8f9eb6;
}
.contactus-inner .contactus-contact {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.contactus-inner .contactus-from {
    width: 660px;
}
.contactus-from input {
    box-sizing: border-box;
    margin-top: 30px;
    padding: 16px 26px;
    width: 100%;
    font-size: 1.125rem;
    border: none;
    border-bottom: 1px solid #d9dee5;
    outline: none;
}

.contactus-inner .contactus-more {
    cursor: pointer;
    margin-top: 80px;
    width: 180px;
    height: 50px;
    border: 1px solid #01c7b3;
    border-radius: 4px 4px;
    background-color: #01c7b3;
    text-align: center;
    line-height: 48px;
    font-size: 1.125rem;
    color: #fff;
}
</style>